import React from 'react'
// ===================================================================== Temp
import FormModal from '#cpt/temp/FormModal'
import Controls from '#cpt/temp/Controls'
// ===================================================================== Declare
const { $Lazy, $fn } = window
// ===================================================================== Lazy
const Page 			= $Lazy.load(()=>import('#tp/page/page-container'))
const Tabs 			= $Lazy.load(()=>import('#tp/tabs/tabs'))
//
const $cache 	= $Lazy.file(()=>import('#private/cache-api'))
// ===================================================================== data
const level = [
	{ name: '普通', value: 1 },
	{ name: '重要', value: 2 },
	{ name: '紧急', value: 3 },
	{ name: '重要且紧急', value: 4 }
]
const status = [
	{ name: '未读', value: 0 },
	{ name: '已读', value: 1 }
]
const notice = [
	{ name: '普通通知', value: 0 },
	{ name: '待办事项', value: 1 }
]
const saveName = 'workbench-info'
// ===================================================================== component
class Index extends React.Component{
	state = {
		index: $fn.local(saveName) || 0,
		formData : [
			{ label: '标题',		name: 'title', 		full:true, required: true },
			{ label: '联系人',		name: 'users',		full:true, required: true, type:'treeSelect', data:[], loading:true},
			{ label: '消息级别',		name: 'level', 		half:true, required: true, type:'select', data:level,   },
			{ label: '内容',		name: 'content',	full:true, required: true, type:'textarea'},
		],
		pages: [
			{ component:$Lazy.state(()=>import('./cpt/a')) },
			{ component:$Lazy.state(()=>import('./cpt/b')) },
			{ component:$Lazy.state(()=>import('./cpt/c')) },
		]
	}
	
	api = ['msg-system/add','msg-notice/add']
	
	componentDidMount(){
		const { pages, index } = this.state
		pages[index].first = true
		this.setState({ pages })
		
		$fn.fresh.on(()=>{
			const { index } = this.state
			this['ref' + index].fetch()
		})
	}
	componentWillUnmount(){
		// $fn.remove(saveName)
		$fn.fresh.remove()
	}
	
	// 获取弹窗下拉框数据
	getModalSelect = async () => {
		const { formData } = this.state
		$fn.setModalRows(formData, 'users', ()=>{
			$cache.then( async f => {
				// 模板名称
				$fn.setRow(formData, 'users',  await f.getCache({ api: 'employee/departmentuser'}))
				//
				this.setState({ formData })
			})
		})
	}
	
	tabs = [
		{ title:'系统通知', status:0 },
		{ title:'系统公告', status:1 },
		{ title:'系统消息', status:2 }
	]
	
	cols  = [
		{ title: '重要级别', 		dataIndex: 'level', 		width:100, render:text=>{
			const txt = $fn.getState(level,text)
			const colors = [ '#333', '#0F9BCF', '#F89D00', '#FF5656' ]
			return <span style={{ color:colors[ +text - 1] }}>{txt}</span>
		} },
		{ title: '公告名称', 		dataIndex: 'title', 		width:'40%', render: ( text, {title, is_view} ) => {
			const isView = +is_view === 0
			return (
				<div className='fxm'>
					<div className='fxm'>
						<i className='r100px mr10 bcm' style={{width:6,height:6, background: isView ? $fn.c0 : '#999' }}></i>
						<b className={isView?'g3' : 'g9'}>{title}</b>
					</div>
					{/*
						<div className='mlr5 g9'>-</div>
						<div className='g9 omits-1 ex'>{content}</div>
					*/}
				</div>
			)
		}  },
		{ title: '发布者', 			dataIndex: 'created_uname', 	width:150 },
		{ title: '日期', 			dataIndex: 'publish_at', 		...$fn.table.time },
	]
	
	// 操作按钮
	controls = () => [
		+this.state.index !== 2 && Controls.click.call(this,'发布',()=>{
			const { formData, index } = this.state
			this.modal.open({formRef:this.formRef})
			if(+index === 0){
				this.getModalSelect()
			}
			
			$fn.hideRows(formData, 'users', +index !== 0)
			
			this.setState({ formData })
		}) 
	]
	render(){
		const { index, pages } = this.state
		return (
			<>
				<Page>
					{/* 选项卡 */}
					<Tabs
						defaultActiveKey = { index }
						data		= { this.tabs }
						onTabs 		= { (data, index) => {
							pages[+index].first = true
							$fn.local(saveName, index)
							this.setState({ index:+index, pages })
						}}
						controls	= { this.controls() }
					/>
					
					{
						pages.map((v,i)=> v.first && <div className='ex rel fv' key={i} style={{ display: +index === i && v.first ? 'flex' : 'none' }}><v.component onRef={ref=>this['ref' + i] = ref} level={level} status={status} cols={this.cols} notice={notice} {...this.props} /></div>)
					}
				
				</Page>
				{ 
					FormModal.call(this,{ title:'发布消息', api: this.api[index],
						onRefresh:()=>{
							this['ref' + index].fetch()
						},
						getSubmit: ({ users }) => {
							
							if($fn.hasArray(users)){
								const { formData } = this.state
								const { data } = formData[1]
								let stack = []
								
								users.forEach(key => {
									data.forEach(v => {
										// 全部选中 Key
										if( v.value === key ){
											v.children.forEach(m=>{
												m.checked = true
											})
										}
										// 单独选中 key
										v.children.forEach(m=>{
											if(m.value === key){
												m.checked = true
												v.checked = true
											}
										})
									})
								})						
								
								data.forEach( v =>{
									const s = []
									if(v.checked){
										s.push(v.value)
									}
									
									v.children.forEach(m=>{
										if(m.checked){
											s.push(m.value)
										}
									})
									if($fn.hasArray(s)){
										stack.push(s)
									}
								})
								
								return { users: stack }
							}
						}
					})
				}
			</>
		)
	}
}

export default Index